<template>
  <!-- 首页 -->
  <div class="home">
    <div class="banxin">
      <div class="banner">
        <img src="../assets/images/home/banner.png" alt="" />
      </div>
    </div>
    <div class="list">
      <Title :src="recommend" title="精品兑换"></Title>
      <List :arr="JinPinArr" />
      <Title :src="hot" title="热门兑换"></Title>
      <div style="margin-bottom: 30px" class="banxin">
        <img src="../assets/images/home/ad.png" alt="" />
      </div>
      <List :arr="HotArr" />
    </div>
    <Title :src="integral" title="积分攻略"></Title>
    <JifenGonglue />
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import List from "@/components/List.vue";
import JifenGonglue from "@/components/JifenGonglue.vue";
import { JingPinApi, HotApi } from "@/request/api";
export default {
  name: "HomeView",
  data() {
    return {
      recommend: require("../assets/images/home/Recommend.png"),
      hot: require("../assets/images/home/hot.png"),
      integral: require("../assets/images/home/integral.png"),
      // 精品推荐数据数组
      JinPinArr: [],
      // 热门兑换数据数组
      HotArr: [],
    };
  },
  components: {
    Title,
    List,
    JifenGonglue,
  },
  created() {
    // 精品推荐
    JingPinApi().then((res) => {
      if (res.data.code === 0) {
        // console.log(res);
        this.JinPinArr = res.data.data.data.records;
      }
    });
    // 热门数据
    HotApi().then((res) => {
      if (res.data.code === 0) {
        // console.log(res);
        this.HotArr = res.data.data.data.records;
      }
    });
  },
};
</script>
<style lang = "less" scoped>
@import "../assets/base.less";
.list {
  background: #f5f5f5;
}
</style>
